<template>
    <div class="wp-box">
      <div class="box" v-if="HideValues">
        <div class="title">
          <span>{{ contentList[0].Title }}</span>
          <img src="@/assets/img/product/ic_del.png" class="img-del" @click="deleBtn(1)" />
        </div>
        <div class="content">
          <div class="list-left">模块:</div>
          <div class="list-right">
            <input type="text" class="list-inp" readOnly="true" v-model="contentList[0].Section" />
          </div>
        </div>
        <div class="content">
          <div class="list-left">系统:</div>
          <div class="list-right">
            <input type="text" class="list-inp" readOnly="true" v-model="contentList[0].System" />
          </div>
        </div>
        <div class="content">
          <div class="list-left">型号:</div>
          <div class="list-right">
            <input type="text" class="list-inp" readOnly="true" v-model="contentList[0].Type" />
          </div>
        </div>
        <div class="content">
          <div class="list-left">权重:</div>
          <div class="list-right">
            <input type="number" class="list-inp" v-model="contentList[0].Weight" />
          </div>
        </div>
        <div class="bottomBox">
          <div class="bottom-left">内容:</div>
          <div class="bottom-right">
            <button class="ComBtn" @click="ShowModel(1)" v-if="CompletedFusCail">
              未设置
            </button>
            <button class="ComBtn" @click="ShowModel(1)" v-else>已设置</button>
          </div>
          <div class="btm-btn">
            <button class="btm-btn-left" @click="random(1)">智能生成</button>
            <button class="btm-btn-right" @click="Reset(1)">重置</button>
          </div>
        </div>
      </div>
      <div class="box" v-if="HideValues2">
        <div class="title">
          <span>{{ contentList[1].Title }}</span>
          <img src="@/assets/img/product/ic_del.png" class="img-del" @click="deleBtn(2)" />
        </div>
        <div class="content">
          <div class="list-left">模块:</div>
          <div class="list-right">
            <input type="text" class="list-inp" readOnly="true" v-model="contentList[1].Section" />
          </div>
        </div>
        <div class="content">
          <div class="list-left">系统:</div>
          <div class="list-right">
            <input type="text" class="list-inp" readOnly="true" v-model="contentList[1].System" />
          </div>
        </div>
        <div class="content">
          <div class="list-left">型号:</div>
          <div class="list-right">
            <input type="text" class="list-inp" readOnly="true" v-model="contentList[1].Type" />
          </div>
        </div>
        <div class="content">
          <div class="list-left">权重:</div>
          <div class="list-right">
            <input type="number" class="list-inp" v-model="contentList[1].Weight" />
          </div>
        </div>
        <div class="bottomBox">
          <div class="bottom-left">内容:</div>
          <div class="bottom-right">
            <button class="ComBtn" @click="ShowModel(2)" v-if="CompletedLIDAR">
              未设置
            </button>
            <button class="ComBtn" @click="ShowModel(2)" v-else>已设置</button>
          </div>
          <div class="btm-btn">
            <button class="btm-btn-left" @click="random(2)">智能生成</button>
            <button class="btm-btn-right" @click="Reset(2)">重置</button>
          </div>
        </div>
      </div>
      <div class="box" v-if="HideValues3">
        <div class="title">
          <span>{{ contentList[2].Title }}</span>
          <img src="@/assets/img/product/ic_del.png" class="img-del" @click="deleBtn(3)" />
        </div>
        <div class="content">
          <div class="list-left">模块:</div>
          <div class="list-right">
            <input type="text" class="list-inp" readOnly="true" v-model="contentList[2].Section" />
          </div>
        </div>
        <div class="content">
          <div class="list-left">系统:</div>
          <div class="list-right">
            <input type="text" class="list-inp" readOnly="true" v-model="contentList[2].System" />
          </div>
        </div>
        <div class="content">
          <div class="list-left">型号:</div>
          <div class="list-right">
            <input type="text" class="list-inp" readOnly="true" v-model="contentList[2].Type" />
          </div>
        </div>
        <div class="content">
          <div class="list-left">权重:</div>
          <div class="list-right">
            <input type="number" class="list-inp" v-model="contentList[2].Weight" />
          </div>
        </div>
        <div class="bottomBox">
          <div class="bottom-left">内容:</div>
          <div class="bottom-right">
            <button class="ComBtn" @click="ShowModel(3)" v-if="CompletedThree">
              未设置
            </button>
            <button class="ComBtn" @click="ShowModel(3)" v-else>已设置</button>
          </div>
          <div class="btm-btn">
            <button class="btm-btn-left" @click="random(3)">智能生成</button>
            <button class="btm-btn-right" @click="Reset(3)">重置</button>
          </div>
        </div>
      </div>
      <div class="box" v-if="HideValues4">
        <div class="title">
          <span>{{ contentList[3].Title }}</span>
          <img src="@/assets/img/product/ic_del.png" class="img-del" @click="deleBtn(4)" />
        </div>
        <div class="content">
          <div class="list-left">模块:</div>
          <div class="list-right">
            <input type="text" class="list-inp" readOnly="true" v-model="contentList[3].Section" />
          </div>
        </div>
        <div class="content">
          <div class="list-left">系统:</div>
          <div class="list-right">
            <input type="text" class="list-inp" readOnly="true" v-model="contentList[3].System" />
          </div>
        </div>
        <div class="content">
          <div class="list-left">型号:</div>
          <div class="list-right">
            <input type="text" class="list-inp" readOnly="true" v-model="contentList[3].Type" />
          </div>
        </div>
        <div class="content">
          <div class="list-left">权重:</div>
          <div class="list-right">
            <input type="number" class="list-inp" v-model="contentList[3].Weight" />
          </div>
        </div>
        <div class="bottomBox">
          <div class="bottom-left">内容:</div>
          <div class="bottom-right">
            <button class="ComBtn" @click="ShowModel(4)" v-if="CompletedFour">
              未设置
            </button>
            <button class="ComBtn" @click="ShowModel(4)" v-else>已设置</button>
          </div>
          <div class="btm-btn">
            <button class="btm-btn-left" @click="random(4)">智能生成</button>
            <button class="btm-btn-right" @click="Reset(4)">重置</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
<script>
import { defineComponent } from "vue";
import fromSelect from "@/components/newIndexCopy/models/FromSelect.vue";
import fromPopup from "@/components/newIndexCopy/models/FromPopup.vue";
import { ElMessage } from 'element-plus'
import { LoginOutlined } from "@ant-design/icons-vue";
export default defineComponent({
    name: "",
    components: {
      fromSelect,
      fromPopup,
    },
    props: {
      editModel: String,
    },
    data() {
      return {
        HideValues: true,
        HideValues2: true,
        HideValues3: true,
        HideValues4: true,
        startNum:0,
        endNum:0,
        editArr: [],
        sele: "sele",
        inp: "inp",
        title: "模块",
        CompletedFusCail: true,
        CompletedLIDAR: true,
        CompletedThree: true,
        CompletedFour: true, 
        optionList: [
          { name: "多传感器融合标定" },
          { name: "激光雷达配置" }, 
          { name: "协议解读" }, 
          { name: "应用" },
          ],
        titleSystem: "系统",
        optionListSystem: [{ name: "毫米波雷达" }, { name: "双目相机" }],
        titleModel: "型号",
        optionListModel: [{ name: "大陆ARS408" }, { name: "长江5号" }],
        titleWeight: "权重",
        optionListCont: [{ name: "未设置" }],
        task: [{}, {}, {}, {}],
        dataList: [
          { title: "项目一" },
          { title: "项目二" },
          { title: "项目三" },
          { title: "项目四" },
        ],
        seTypes: "",
        contentList: [
          {
            Title: "项目一",
            Section: "多传感器融合标定",
            System: "无人驾驶小车",
            Type: 'BF-001',
            Weight: null,
            Settings: {},
          },
          {
            Title: "项目二",
            Section: "激光雷达配置",
            System: "激光雷达",
            Type: "速腾16p",
            Weight: null,
            Settings: {},
          },
          {
            Title: "项目三",
            Section: "协议解读",
            System: "毫米波雷达",
            Type: "大陆ARS408",
            Weight: null,
            Settings: {},
          },
          {
            Title: "项目四",
            Section: "应用",
            System: "双目相机",
            Type: "长江5号",
            Weight: null,
            Settings: {},
          },
        ],
      };
    },
    created() {
      this.edit();
    },
    
    methods: {
      // 删除
      deleBtn(val) {
        this.$emit("del");
        if (val == 1) {
          this.HideValues = false;
          this.contentList.forEach((item, index) => {
            console.log('item:',item,'index:',index)
            console.log('this.contentList:',this.contentList)
            if (item.Title == "项目一") {
              delete this.contentList[index];
              // this.contentList.splice(index, 1);
            }
          });
        }
        if (val == 2) {
          this.HideValues2 = false;
          this.contentList.forEach((item, index) => {
            if (item.Title == "项目二") {
              delete this.contentList[index];
              // this.contentList.splice(index, 1);
            }
          });
        }
        if (val == 3) {
          this.HideValues3 = false;
          this.contentList.forEach((item, index) => {
            if (item.Title == "项目三") {
              delete this.contentList[index];
              // this.contentList.splice(index, 1);
            }
          });
        }
        if (val == 4) {
          this.HideValues4 = false;
          this.contentList.forEach((item, index) => {
            if (item.Title == "项目四") {
              delete this.contentList[index];
              // this.contentList.splice(index, 1);
            }
          });
        }
      },
      edit() {
        if (this.editModel != "") {
          this.editArr = JSON.parse(this.editModel);
          this.editArr.forEach((item, index) => {
            if (item.Title == "项目一") {
              this.contentList[0].Weight = this.editArr[index].Weight;
              this.CompletedFusCail = false;
            }
            if (item.Title == "项目二") {
              this.contentList[1].Weight = this.editArr[index].Weight;
              this.CompletedLIDAR = false;
            }
            if (item.Title == "项目三") {
              this.contentList[2].Weight = this.editArr[index].Weight;
              this.CompletedThree = false;
            }
            if (item.Title == "项目四") {
              this.contentList[3].Weight = this.editArr[index].Weight;
              this.CompletedFour = false;
            }
          });
        }
      },
      AngleNumRandom() {
        let angleNum = ['0,90','0,180','0,270','0,360','90,180','90,270','90,360','180,270','180,360','270,360']
        let angleIndex = Math.floor(Math.random() * (9 - 0 + 1)) + 0
        this.startNum = Number(angleNum[angleIndex].split(',')[0])
        this.endNum = Number(angleNum[angleIndex].split(',')[1])
        console.log('this.startNum:',this.startNum,'this.endNum',this.endNum)
      },
      // 随机数据
      random(index) {
        if (index == 1) {
          this.ResFusCail();
          this.contentList[0].Weight = 100;
          let FusionCalibration = [
            Math.floor(Math.random() * (2 - 1 + 1)) + 1,
            Math.floor(Math.random() * (7 - 3 + 1)) + 3,
            Math.floor(Math.random() * (12 - 8 + 1)) + 8,
            Math.floor(Math.random() * (17 - 13 + 1)) + 13,
          ];
          sessionStorage.setItem("FusionCalibrationList", JSON.stringify(FusionCalibration));
          this.CompletedFusCail = false;
        }
        if (index == 2) {
          this.ResLIDAR();
          this.AngleNumRandom()
          this.contentList[1].Weight = 100;          
          let speedNums = [600,1200]
          let speedIndex = Math.floor(Math.random()*speedNums.length)
          let LIDAR = {
            MSOPPortValue: Math.floor(Math.random() * (6700 - 6698 + 1)) + 6698,
            DIFOPPortValue: Math.floor(Math.random() * (7789 - 7787 + 1)) + 7787,
            start:this.startNum,
            end:this.endNum,
            value:speedNums[speedIndex],            
          };
          sessionStorage.setItem("LIDARList", JSON.stringify(LIDAR));
          this.CompletedLIDAR = false;
        }
        if (index == 3) {
          this.Res3();
          this.contentList[2].Weight = 100;
          let types = Math.floor(Math.random() * (7 - 1)) + 1;
          if (types == 1) {
            let NewProtocol = [
              {
                Id: 0x201,
                Data: [0x40, 0x1d, 0x40, 0x00, 0x00, 0x34, 0x00, 0x00],
                Properties: [
                  "RadarState_MaxDistanceCfg",
                  "RadarState_MotionRxState",
                ],
              },
              {
                Id: 0x60a,
                Data: [0x07, 0x6f, 0x53, 0x10, 0x00, 0x00, 0x00, 0x00],
                Properties: ["Object_NofObjects", "Object_MeasCounter"],
              },
              {
                Id: 0x60d,
                Data: [0x01, 0x7d, 0x0f, 0xa0, 0x70, 0x80, 0x19, 0x05],
                Properties: ["Object_ArelLong", "Object_Length"],
              },
            ];
            sessionStorage.setItem("AgreementList", JSON.stringify(NewProtocol));
          } else if (types == 2) {
            let NewProtocol = [
              {
                Id: 0x201,
                Properties: ["RadarState_OutputTypeCfg"],
                Data: [0x40, 0x1d, 0x40, 0x00, 0x00, 0x34, 0x00, 0x00],
              },
              {
                Id: 0x60a,
                Data: [0x07, 0x6f, 0x53, 0x10, 0x00, 0x00, 0x00, 0x00],
                Properties: ["Object_NofObjects", "Object_MeasCounter"],
              },
              {
                Id: 0x60d,
                Properties: ["Object_ArelLong", "Object_Length"],
                Data: [0x01, 0x7d, 0x0f, 0xa0, 0x70, 0x80, 0x19, 0x05],
              },
            ];
            sessionStorage.setItem("AgreementList", JSON.stringify(NewProtocol));
          } else if (types == 3) {
            let NewProtocol = [
              {
                Id: 0x201,
                Properties: ["RadarState_MaxDistanceCfg"],
                Data: [0x40, 0x1d, 0x40, 0x00, 0x00, 0x34, 0x00, 0x00],
              },
              {
                Id: 0x60a,
                Data: [0x07, 0x6f, 0x53, 0x10, 0x00, 0x00, 0x00, 0x00],
                Properties: ["Object_NofObjects", "Object_MeasCounter"],
              },
              {
                Id: 0x60d,
                Properties: ["Object_ArelLong", "Object_Width"],
                Data: [0x01, 0x7d, 0x0f, 0xa0, 0x70, 0x80, 0x19, 0x05],
              },
            ];
            sessionStorage.setItem("AgreementList", JSON.stringify(NewProtocol));
          } else if (types == 4) {
            let NewProtocol = [
              {
                Id: 0x201,
                Properties: ["RadarState_OutputTypeCfg"],
                Data: [0x40, 0x1d, 0x40, 0x00, 0x00, 0x34, 0x00, 0x00],
              },
              {
                Id: 0x60a,
                Data: [0x07, 0x6f, 0x53, 0x10, 0x00, 0x00, 0x00, 0x00],
                Properties: ["Object_NofObjects", "Object_MeasCounter"],
              },
              {
                Id: 0x60d,
                Data: [0x01, 0x7d, 0x0f, 0xa0, 0x70, 0x80, 0x19, 0x05],
                Properties: ["Object_ArelLong", "Object_Length", "Object_Width"],
              },
            ];
            sessionStorage.setItem("AgreementList", JSON.stringify(NewProtocol));
          } else if (types == 5) {
            let NewProtocol = [
              {
                Id: 0x201,
                Data: [0x40, 0x1d, 0x40, 0x00, 0x00, 0x34, 0x00, 0x00],
                Properties: [
                  "RadarState_MaxDistanceCfg",
                  "RadarState_OutputTypeCfg",
                ],
              },
              {
                Id: 0x60a,
                Data: [0x07, 0x6f, 0x53, 0x10, 0x00, 0x00, 0x00, 0x00],
                Properties: ["Object_NofObjects", "Object_MeasCounter"],
              },
              {
                Id: 0x60d,
                Data: [0x01, 0x7d, 0x0f, 0xa0, 0x70, 0x80, 0x19, 0x05],
                Properties: [
                  "Object_ArelLat",
                  "Object_Length",
                  "Object_Width",
                ],
              },
              {
                Id: 0x60b,
                Data: [0x05, 0x4f, 0x9b, 0xf5, 0x80, 0x20, 0x01, 0x71],
                Properties: ["Object_ID"],
              },
            ];
            sessionStorage.setItem("AgreementList", JSON.stringify(NewProtocol));
          } else if (types == 6) {
            let NewProtocol = [
              {
                Id: 0x201,
                Data: [0x40, 0x1d, 0x40, 0x00, 0x00, 0x34, 0x00, 0x00],
                Properties: [
                  "RadarState_RadarPowerCfg",
                  "RadarState_MotionRxState",
                ],
              },
              {
                Id: 0x60a,
                Data: [0x07, 0x6f, 0x53, 0x10, 0x00, 0x00, 0x00, 0x00],
                Properties: ["Object_NofObjects"],
              },
              {
                Id: 0x60d,
                Data: [0x01, 0x7d, 0x0f, 0xa0, 0x70, 0x80, 0x19, 0x05],
                Properties: ["Object_Length", "Object_Width"],
              },
              {
                Id: 0x60b,
                Data: [0x05, 0x4f, 0x9b, 0xf5, 0x80, 0x20, 0x01, 0x71],
                Properties: ["Object_ID"],
              },
            ];
            sessionStorage.setItem("AgreementList", JSON.stringify(NewProtocol));
          }
          this.CompletedThree = false;
        }
        if (index == 4) {
          this.Res4();
          this.contentList[3].Weight = 100;
          let types = Math.floor(Math.random() * (4 - 1)) + 1;
          if (types == 1) {
            let data = { Id: 0 };
            sessionStorage.setItem("LaneDetectList", JSON.stringify(data));
          } else if (types == 2) {
            let data = { Id: 1 };
            sessionStorage.setItem("LaneDetectList", JSON.stringify(data));
          } else if (types == 3) {
            let data = { Id: 2 };
            sessionStorage.setItem("LaneDetectList", JSON.stringify(data));
          }
          this.CompletedFour = false;
        }
      },
      openModel(index) {
        if (this.task[index] == "多传感器融合标定") {
          this.$emit("detailsMethod", 1);
        } else if (this.task[index] == "激光雷达配置") {
          this.$emit("detailsMethod", 2);
        } else if (this.task[index] == "协议解读") {
          this.$emit("detailsMethod", 3);
        } else if (this.task[index] == "应用") {
          this.$emit("detailsMethod", 4);
        }
      },

      ShowModel(index) {
        this.$emit("detailsMethod", index);
      },
      seleVal(data) {
        this.task[this.seTypes] = data;
      },
      seleTypes(index) {
        this.seTypes = index;
      },
      // 确定提交
      ok() {
        console.log('this.contentList',this.contentList)
        this.$emit("ok", this.contentList);
      },
      // 内容按钮改变
      changeBtn(index) {
        if (index == 5) {
          this.CompletedFusCail = false;
        } else if (index == 6) {
          this.CompletedLIDAR = false;
        } else if (index == 3) {
          this.CompletedThree = false;
        } else if (index == 4) {
          this.CompletedFour = false;
        }
      },
      ResFusCail() {
        this.contentList[0].Weight = null;
        let FusCailList = [1,3,8,13];
        sessionStorage.setItem("FusionCalibrationList", JSON.stringify(FusCailList));
        this.CompletedFusCail = true;
      },
      ResLIDAR() {
        this.CompletedLIDAR = true;
        this.contentList[1].Weight = null;
        let LIDARList = { MSOPPortValue:0,DIFOPPortValue:0,start:0,end:360,value:'300rmp/min' };
        sessionStorage.setItem("LIDARList", JSON.stringify(LIDARList));
      },
      Res3() {
        this.CompletedThree = true;
        this.contentList[2].Weight = null;
        let NewAgreementList = [];
        sessionStorage.setItem("AgreementList", JSON.stringify(NewAgreementList));
      },
      Res4() {
        let NewLaneDetectList = { Id: 0 };
        sessionStorage.setItem(
          "LaneDetectList",
          JSON.stringify(NewLaneDetectList)
        );
  
        this.CompletedFour = true;
        this.contentList[3].Weight = null;
      },
      // 重置
      Reset(index) {
        ElMessage({
          message: "已重置！",
          type: "success",
        });
        if (index == 1) {
          this.ResFusCail()
        } else if (index == 2) {
          this.ResLIDAR();
        } else if (index == 3) {
          this.Res3();
        } else if (index == 4) {
          this.Res4();
        } else if (index == 9) {
          this.ResFusCail();
          this.ResLIDAR();
          this.Res3();
          this.Res4();
        }
      },
    },
  });
  </script>
  
  <style lang="less" scoped>
  .wp-box {
    height: 590px;
    overflow: hidden;
  }
  
  .box {
    float: left;
    width: 304px;
    height: 544px;
    border-radius: 10px;
    border: 1px solid #dadbde;
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 10px;
  }
  
  .title {
    width: 100%;
    height: 67px;
    border-bottom: 1px solid #f0f1f5;
    margin-bottom: 29px;
    text-align: left;
    position: relative;
  }
  
  .title span {
    font-size: 18px;
    color: #1b1b1d;
    line-height: 67px;
    font-weight: 500;
    padding-left: 20px;
  }
  
  .img-del {
    position: absolute;
    top: 21px;
    right: 20px;
    width: 25px;
    height: 25px;
  }
  
  .content {
    display: flex;
    padding-left: 20px;
    margin-top: 20px;
  }
  
  .list-left {
    font-size: 18px;
    font-weight: 400;
    line-height: 40px;
    color: #81859c;
    padding-right: 10px;
  }
  
  .list-select {
    width: 210px;
    height: 40px;
    user-select: none;
    border: 1px solid #c0c2cd;
    outline: none;
    padding-left: 6px;
  }
  
  .list-inp {
    width: 198px;
    height: 38px;
    border: 1px solid #c0c2cd;
    outline: none;
    padding-left: 10px;
  }
  
  .bottomBox {
    padding-left: 20px;
    margin-top: 20px;
    text-align: left;
    border-top: 1px solid #f0f1f5;
  }
  
  .bottom-left {
    font-size: 18px;
    font-weight: 400;
    line-height: 40px;
    color: #81859c;
    padding-right: 10px;
    padding-top: 20px;
  }
  
  .bottom-select {
    width: 264px;
    height: 40px;
    user-select: none;
    border: 1px solid #c0c2cd;
    outline: none;
    padding-left: 10px;
  }
  
  .btm-btn-left {
    width: 120px;
    height: 40px;
    background: linear-gradient(270deg, #e9f4fc 0%, #f2f2fc 100%);
    border-radius: 10px;
    outline: none;
    border: none;
    font-weight: 400;
    color: #5984e0;
    font-size: 16px;
    margin-top: 20px;
  }
  
  .btm-btn-right {
    width: 120px;
    height: 40px;
    background: #f2f2f5;
    border-radius: 10px;
    border: none;
    font-weight: 400;
    color: #81859c;
    font-size: 16px;
    margin-left: 24px;
  }
  
  .SetUpBtn {
    width: 264px;
    height: 40px;
    border: 1px solid #e6e7eb;
    font-size: 18px;
    outline: none;
    color: #bdbdbe;
  }
  
  .ComBtn {
    width: 264px;
    height: 40px;
    border: 1px solid #c0c2cd;
    font-size: 18px;
    outline: none;
    background-color: #fff;
    color: #1b1b1d;
  }
  </style>